<template>
  <div class="bigbox">
    学科：
    <el-select v-model="value" placeholder="请选择">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
  <el-button type="primary" class="search">查询</el-button>

<!-- 表格 -->
<el-table
    class="biaoge"
    :data="tableData"
    border
    style="width: 100%">
    <el-table-column
      prop="id"
      label="Id"
      >
    </el-table-column>
    <el-table-column
      prop="sjname"
      label="试卷名称"
      >
    </el-table-column>
    <el-table-column
    prop="username"
      label="用户名称"
      >
    </el-table-column>
    <el-table-column
      prop="score"
      label="得分"
      >
    </el-table-column>
    <el-table-column
      prop="panduan"
      label="题目对错"
      >
    </el-table-column>
    <el-table-column
      prop="usetime"
      label="耗时"
      >
    </el-table-column>
    <el-table-column
      prop="subtime"
      label="提交时间"
      >
    </el-table-column>
    <el-table-column prop="operate" label="操作" width="95" >
      <el-button>批改</el-button>
    </el-table-column>
  </el-table>



  <!-- 分页功能 -->
  <div class="block">
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage4"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="1"
      layout="total, sizes, prev, pager, next, jumper"
      :total="4">
    </el-pagination>
  </div>

  </div>

</template>

<script>
export default {
  methods: {
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      },
    },
  data() {
      return {
        // 分页
        currentPage1: 5,
        currentPage2: 5,
        currentPage3: 5,
        currentPage4: 4,
        // 表格数据
        tableData: [
        {
          id: '9',
          sjname: 'aaa',
          username: '一年级',
          score:"admin",
          panduan:"√",
          usetime: '2023-05-10 17:30:51',
          subtime: '2023-05-10 17:30:51'
        },
      ],
        // 下拉选项
        options: [{
          value: '选项1',
          label: '一年级'
        }, {
          value: '选项2',
          label: '二年级'
        }, {
          value: '选项3',
          label: '三年级'
        }, {
          value: '选项4',
          label: '四年级'
        }, {
          value: '选项5',
          label: '五年级'
        },
        {
          value: '选项6',
          label: '六年级'
        },
        {
          value: '选项7',
          label: '初一'
        },
        {
          value: '选项8',
          label: '初二'
        },
        {
          value: '选项9',
          label: '初三'
        },
        {
          value: '选项10',
          label: '高一'
        },
        {
          value: '选项11',
          label: '高二'
        },
        {
          value: '选项12',
          label: '高三'
        }
      ],
        value: '',
      }

      
      }
    }
</script>

<style scoped>
 .bigbox{
    background-color: #fff;
    padding: 30px;
  }
  .search{
    margin-left: 30px;
  }
  .biaoge{
    margin-top: 30px;
    margin-bottom: 70px;
  }
</style>